<!--
 * @Description: 系统首页
 * @Author: YourName
 * @Date: 2023-03-15
-->
<template>
  <div class="content">
    <!-- 新增顶部区域，包含4个组件 -->
    <div class="header">
      <div class="chart">
        <C211></C211>
      </div>
      <div class="chart">
        <C212></C212>
      </div>
      <div class="chart">
        <C213></C213>
      </div>
      <div class="chart">
        <C214></C214>
      </div>
      <div class="chart">
        <C215></C215>
      </div>
    </div>
    
    <!-- 保持原来的中部区域 -->
    <div class="middle">
      <div class="chart">
        <C221></C221>
      </div>
      <div class="chart">
        <C222></C222>
      </div>
    </div>
    
    <!-- 保持原来的底部区域 -->
    <div class="footer">
      <div class="chart">
        <Map></Map>
      </div>
      <div class="chart">
        <C223></C223>
      </div>
    </div>
  </div>
</template>

<script>
import C211 from './components/C211.vue'
import C212 from './components/C212.vue'
import C213 from './components/C213.vue'
import C214 from './components/C214.vue'
import C215 from './components/C215.vue'
import C221 from './components/C221.vue'
import C222 from './components/C222.vue'
import Map from './components/Map.vue'
import C223 from './components/C223.vue'

export default {
  components: {
    C211,
    C212,
    C213,
    C214,
    C215,
    C221,
    C222,
    Map,
    C223
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.content {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  
  // 顶部区域 - 4个组件
  .header {
    flex: 1;
    display: flex;
    margin-bottom: 2px;
    
    &>div {
      flex: 1;
      margin: 0 5px;
      &:first-child {
        margin-left: 0;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  
  // 中部区域 - 保持原top布局
  .middle {
    flex: 1;
    display: flex;
    margin-bottom: 2px;
    
    &>div {
      flex: 1;
      margin: 0 5px;
      &:first-child {
        margin-left: 0;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  
  // 底部区域 - 保持原bottom布局
  .footer {
    flex: 1;
    display: flex;
    
    &>div {
      flex: 1;
      margin: 0 5px;
      &:first-child {
        margin-left: 0;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  

}
</style>